<!--
 * @author: Goalias
 * @since: 2024-12-24
-->
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { userApi } from '@/apis/UserApi';
import { categoryApi } from '@/apis/CategoryApi';
import { tagApi } from '@/apis/TagApi';
import { archiveApi } from '@/apis/ArchiveApi';
import { articleApi } from '@/apis/ArticleApi';
import type { User } from '@/apis/types/User';
import type { TagVo } from '@/apis/types/Tag';
import type { Category } from '@/apis/types/Category';
import type { ArticleCount, ArticleView } from '@/apis/types/Article';
import type { Archive } from '@/apis/types/Archive';
import ShineBorder from '@/components/ui/ShineBorder';
import { type TabsPaneContext } from 'element-plus';
import NumberTicker from '@/components/ui/NumberTicker';
import ShimmerButton from '@/components/ui/ShimmerButton';
import PulsatingButton from '@/components/ui/pulsating-button';
import { Calendar } from '@element-plus/icons-vue';
import { extractDayAndHour, extractMonth } from '@/utils/util';
import { ElMessage } from 'element-plus';

const loading = ref(false);
const categoryLoading = ref(false);
const tagLoading = ref(false);
const archiveRecordLoading = ref(false);

const articleDialogVisible = ref(false);
const categoryDialogVisible = ref(false);
const tagDialogVisible = ref(false);

const activeArchiveMonthRecord = ref('1');
const activeArchiveRecord = ref('1');
const activeName = ref('web-desc');

const admin = ref<User>();
const tags = ref<TagVo[]>([]);
const categories = ref<Category[]>([]);
const archiveRecords = ref<Archive[]>([]);

const contentCount = ref<ArticleCount>();
const articleCount = ref<number>(0);
const tagCount = ref<number>(0);
const categoryCount = ref<number>(0);

const loadTags = async () => {
	try {
		tagLoading.value = true;
		const tagResponse = await tagApi.getCountList();
		tags.value = tagResponse.data;
	} catch (error) {
		ElMessage.error('加载标签失败');
	} finally {
		tagLoading.value = false;
	}
};

const loadCategories = async () => {
	try {
		categoryLoading.value = true;
		const categoryResponse = await categoryApi.getList();
		categories.value = categoryResponse.data;
	} catch (error) {
		ElMessage.error('加载分类失败');
	} finally {
		categoryLoading.value = false;
	}
};

const loadArchiveRecord = async () => {
	try {
		archiveRecordLoading.value = true;
		const archiveRecordResponse = await archiveApi.getList();
		archiveRecords.value = archiveRecordResponse.data.recordList;
	} catch (error) {
		ElMessage.error('加载归档失败');
	} finally {
		archiveRecordLoading.value = false;
	}
};

// 按月份分组
const groupArticlesByMonth = (articleViews: ArticleView[]) => {
	const grouped: Record<string, ArticleView[]> = {};
	articleViews.forEach((articleView) => {
		const month = extractMonth(articleView.createTime); // 提取月份
		if (!grouped[month]) {
			grouped[month] = [];
		}
		grouped[month].push(articleView);
	});
	return grouped;
};

const handleClick = (tab: TabsPaneContext, event: Event) => {
	if (tab.paneName === 'web-desc') {
		articleCount.value = contentCount.value?.article || 0;
		tagCount.value = contentCount.value?.tag || 0;
		categoryCount.value = contentCount.value?.category || 0;
	}
	if (tab.paneName === 'archive-record') {
		articleCount.value = 0;
		tagCount.value = 0;
		categoryCount.value = 0;
		loadArchiveRecord();
	}
};

const getInitInfo = async () => {
	try {
		loading.value = true;
		const res = await userApi.getAdminInfo();
		const articleResponse = await articleApi.getArticleCount();
		admin.value = res.data;
		contentCount.value = articleResponse.data;
	} catch (error) {
		ElMessage.error('加载站点概览失败');
	} finally {
		loading.value = false;
	}
};

onMounted(() => {
	getInitInfo();
});

setTimeout(() => {
	articleCount.value = contentCount.value?.article || 0;
	tagCount.value = contentCount.value?.tag || 0;
	categoryCount.value = contentCount.value?.category || 0;
}, 1000);

// 属性id传递
// 属性id传递
const emit = defineEmits<{
	(e: 'getCategoryId', payload: { id: number; name: string }): void;
	(e: 'getTagId', payload: { id: number; name: string }): void;
	(e: 'getArticleId', value: number): void;
}>();

// 修正：传递的对象属性名必须与事件签名一致
const sendCategoryId = (categoryId: number, categoryName: string) => {
	categoryDialogVisible.value = false;
	emit('getCategoryId', { id: categoryId, name: categoryName });
};

const sendTagId = (tagId: number, tagName: string) => {
	tagDialogVisible.value = false;
	emit('getTagId', { id: tagId, name: tagName });
};

const sendArticleId = (articleId: number) => {
	emit('getArticleId', articleId);
};
</script>

<template>
	<div class="card-container">
		<div v-if="loading">加载中...</div>
		<template v-else>
			<ShineBorder
				color="var(--theme-color)"
				:border-radius="50"
				:border-width="5"
				:duration="10"
				class="admin-border"
			>
				<el-tabs
					v-model="activeName"
					class="tabs"
					@tab-click="handleClick"
				>
					<el-tab-pane
						label="站点概览"
						name="web-desc"
						class="web-desc"
					>
						<!-- 站点概览 -->
						<div class="admin-info">
							<el-avatar
								:src="admin?.avatar"
								style="width: 100px; height: 100px"
							/>
							<div class="admin-name">{{ admin?.nickName }}</div>
							<div class="admin-signature">
								{{ admin?.signature }}
							</div>
						</div>
						<!-- 显示文章、标签、分类的数量 -->
						<div class="summary">
							<ShimmerButton
								shimmer-color="var(--theme-color)"
								shimmer-size="0.2em"
								shimmer-duration="2s"
								border-radius="20px"
								background="rgb(176, 189, 240)"
								class="summary-item-button"
								style="cursor: default"
							>
								<div class="summary-item">
									<NumberTicker
										:value="articleCount"
										direction="up"
										:delay="2"
										:decimal-places="0"
									/>
									<div class="summary-item-desc">文章</div>
								</div>
							</ShimmerButton>
							<el-dialog
								v-model="articleDialogVisible"
								title="🧾 文章 🧾"
								width="500"
								align-center
							>
								<div>文章</div>
							</el-dialog>
							<ShimmerButton
								shimmer-color="var(--theme-color)"
								shimmer-size="0.2em"
								shimmer-duration="2s"
								border-radius="20px"
								background="rgb(176, 189, 240)"
								class="summary-item-button"
								@click="
									(categoryDialogVisible = true),
										loadCategories()
								"
							>
								<div class="summary-item">
									<NumberTicker
										:value="categoryCount"
										direction="up"
										:delay="2"
										:decimal-places="0"
									/>
									<div class="summary-item-desc">分类</div>
								</div>
							</ShimmerButton>
							<el-dialog
								v-model="categoryDialogVisible"
								title="🗂️ 分类 🗂️"
								width="500"
								align-center
							>
								<div v-if="categoryLoading">加载分类中...</div>
								<div class="category-items-container" v-else>
									<div
										class="category-items"
										v-for="category in categories"
										:key="category.id"
									>
										<PulsatingButton
											pulseColor="var(--theme-color)"
											duration="2s"
											class="category-item"
											type="button"
											@click="
												sendCategoryId(
													category.id,
													`${category.name}`
												)
											"
										>
											<div class="category-item-desc">
												{{ category.name }}
												{{ category.count }}
											</div>
										</PulsatingButton>
									</div>
								</div>
							</el-dialog>
							<ShimmerButton
								shimmer-color="var(--theme-color)"
								shimmer-size="0.2em"
								shimmer-duration="2s"
								border-radius="20px"
								background="rgb(176, 189, 240)"
								class="summary-item-button"
								@click="(tagDialogVisible = true), loadTags()"
							>
								<div class="summary-item">
									<NumberTicker
										:value="tagCount"
										direction="up"
										:delay="2"
										:decimal-places="0"
									/>
									<div class="summary-item-desc">标签</div>
								</div>
							</ShimmerButton>

							<el-dialog
								v-model="tagDialogVisible"
								title="🏷️ 标签 🏷️"
								width="500"
								align-center
							>
								<div v-if="tagLoading">加载标签中...</div>
								<div class="tag-items-container" v-else>
									<div
										class="tag-items"
										v-for="tag in tags"
										:key="tag.tagId"
									>
										<PulsatingButton
											pulseColor="var(--theme-color)"
											duration="2s"
											class="tag-item"
											type="button"
											@click="
												sendTagId(
													tag.tagId,
													`${tag.name}`
												)
											"
										>
											<div class="tag-item-desc">
												{{ tag.name }} {{ tag.count }}
											</div>
										</PulsatingButton>
									</div>
								</div>
							</el-dialog>
						</div>
						<div class="admin-desc">
							<div class="admin-desc-item">
								<div>📞 电话: {{ admin?.phone }}</div>
							</div>
							<div class="admin-desc-item">
								<div>
									📧 邮箱:
									<a
										href="mailto: gao0831mail@163.com"
										target="_blank"
									>
										<发送邮件>
									</a>
								</div>
							</div>
							<div class="admin-desc-item">
								<div>
									🗿 GitHub:
									<a
										href="https://github.com/Goalias-G"
										target="_blank"
										>Goalias-G</a
									>
								</div>
							</div>
						</div>
					</el-tab-pane>
					<!-- 归档流年 -->
					<el-tab-pane
						label="归档流年"
						name="archive-record"
						class="archive-record"
					>
						<div class="archive-record-container">
							<div class="archive-record-item">
								<div v-if="archiveRecordLoading">
									加载归档中...
								</div>
								<div
									v-else
									class="archive-record-collapse-container"
								>
									<el-collapse
										class="archive-record-collapse"
										v-model="activeArchiveRecord"
										accordion
									>
										<div
											v-for="archive in archiveRecords"
											:key="archive.year"
										>
											<el-collapse-item
												class="collapse-item-container-outer"
												:name="archive.year"
											>
												<template #title>
													<div
														class="collapse-item-title-outer"
													>
														<el-icon
															class="collapse-item-title-icon"
															><Calendar
														/></el-icon>
														{{ archive.year }}
													</div>
												</template>
												<div
													class="collapse-item"
													v-for="(
														articles, month
													) in groupArticlesByMonth(
														archive.articles
													)"
													:key="month"
												>
													<el-collapse
														class="archive-record-collapse"
														v-model="
															activeArchiveMonthRecord
														"
														accordion
													>
														<el-collapse-item
															class="collapse-item-container-inner"
															:title="
																month + '月份'
															"
															:name="month"
														>
															<div
																v-for="item in articles"
																:key="item.id"
																class="collapse-item-content"
																@click="
																	sendArticleId(
																		item.id
																	)
																"
																style="
																	cursor: pointer;
																"
															>
																<div
																	class="collapse-item-title-inner"
																>
																	<img
																		:src="
																			item.thumbnail
																		"
																		alt="thumbnail"
																		style="
																			width: 30px;
																			height: 30px;
																		"
																	/>
																	{{
																		item.title
																	}}
																</div>
																<div
																	class="collapse-item-desc"
																>
																	{{
																		extractDayAndHour(
																			item.createTime
																		)
																	}}
																	访问量:
																	{{
																		item.viewCount
																	}}
																</div>
															</div>
														</el-collapse-item>
													</el-collapse>
												</div>
											</el-collapse-item>
										</div>
									</el-collapse>
								</div>
							</div>
						</div>
					</el-tab-pane>
				</el-tabs>
			</ShineBorder>
		</template>
	</div>
</template>

<style scoped lang="less">
.card-container {
	display: flex;
	justify-content: flex-start;
}

.admin-border {
	display: flex;
	align-items: center;
	justify-content: space-around;
	height: 580px;
	background-color: rgb(176, 189, 240);
	font-size: 16px;
}

.tabs {
	display: flex;
	position: absolute;
	justify-content: center;
	align-items: center;
	top: 0;
	margin-top: 2vh;
}

.admin-name {
	font-size: 30px;
	font-weight: bold;
	color: var(--theme-color);
}

.admin-signature {
	margin-top: 2vh;
	font-size: 1.1rem;
	color: var(--theme-color);
}

.summary {
	margin-top: 2vh;
	font-weight: bold;
	text-align: center;
	display: flex;
	flex-direction: row;
	gap: 2px;
	align-items: center;
	justify-content: center;
}

.summary-item-button {
	display: flex;
	width: 25px;
}

.summary-item-desc {
	font-size: 16px;
	color: black;
}

.admin-desc {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--theme-color);
}

.admin-desc-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
	font-size: 16px;
	gap: 5px;
}

.web-desc,
.archive-record {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.category-items-container,
.tag-items-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 25px;
	font-size: 16px;
}

.category-item,
.tag-item {
	background-color: orange;
}

.archive-record-collapse-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	overflow-x: hidden;
	overflow-y: scroll;
	max-height: 62vh; //超过滑动
}

.archive-record-collapse-container::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.archive-record-collapse {
	background-color: rgb(176, 189, 240); //归档背景颜色
	--el-collapse-border-color: transparent;
}

.collapse-item-container-outer {
	:deep(.el-collapse-item__header) {
		background-color: transparent;
		color: var(--theme-color); //年份颜色
		margin-top: 6px;
	}
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 13vw;
	max-width: 13vw;
}

.collapse-item-container-inner {
	:deep(.el-collapse-item__header) {
		background-color: #4a90e2; //月份背景颜色
		color: greenyellow;
		border-radius: 100px;
		font-size: 16px;
	}
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: 13vw;
}

.archive-record-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	list-style-position: inside;
	flex-wrap: wrap;
	flex-direction: row;
	max-width: 13vw;

	:deep(.el-collapse-item__content) {
		background-color: transparent;
		padding: 0;
		--el-collapse-border-color: transparent;
	}
	:deep(.el-collapse-item__wrap) {
		border-bottom: 0;
	}
}

.collapse-item-title-outer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	background-color: rgb(235, 235, 174); //年份背景颜色
	font-weight: bold;
	min-width: 13vw;
	max-width: 13vw;
	margin-top: 3px;
}

.collapse-item-title-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	background-color: rgb(212, 220, 250); //文章标题背景颜色
	font-weight: bold;
	min-width: 13vw;
	max-width: 13vw;
	margin-top: 3px;
}

.collapse-item-title-icon {
	margin-right: 6px;
}

.collapse-item-desc {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	background-color: rgb(171, 245, 182); //发布时间背景颜色
}
</style>
